import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { FormattedMessage } from 'umi-plugin-react/locale';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select,Radio,InputNumber,TimePicker,DatePicker } from 'antd';
import moment from 'moment';
import styles from './index.less';
import addTJZ from '@/assets/dialog/addTJZ.png';
import addTJ from '@/assets/dialog/addTJ.png';
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';
import addImg from '@/assets/dialog/add1.png';
import delImg from '@/assets/dialog/del1.png';
import andImg from '@/assets/dialog/and.png';
import orImg from '@/assets/dialog/or1.png';

const dateFormat = 'YYYY-MM-DD';
const timeFormat = 'HH:mm:ss';
const { Option } = Select;
const { TextArea } = Input;
const { Search } = Input;
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 20 },
};

class SlotCase extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dictModalShow:false,
      values:[],
      slotIndex:0,
      itemIndex:0,
      index:0,
      slotArr:[],
      slotCoreArr:[],
      idArr:[],
      queryKey:"",
      slotId:"",
      slot:null
    };
  }

  delCaseItem=(index)=>{
    const {caseArr,upDateCase} = this.props;
    caseArr.splice(index,1);
    upDateCase(caseArr);
  };

  forMapSlots = (tag,itemIndex,index) => {
    const {dialogSlots} = this.props;
    const OptionElem = dialogSlots.map(this.forMapSlotsOption);

    return (
      <span style={{marginLeft: 15}} key={itemIndex}>
        <span className={styles.slotNumber}>{itemIndex+1}</span>
        <Select size='large' value={tag.slotId?tag.slotId:'N'} key={itemIndex} style={{ width: 120,marginLeft:5 }} onChange={(value)=>this.handleSlotSelectChange(value,itemIndex,index)}>
          <Option value='N'>选择词槽</Option>
          {OptionElem}
        </Select>
        {/*<Icon type="close-circle" style={{marginLeft:5,cursor:'pointer'}} onClick={()=>this.delSlotByIndex(itemIndex,index)} />*/}
        <img src={delImg} alt="" height={20} style={{marginLeft:10,cursor:"pointer"}} onClick={()=>this.delSlotByIndex(itemIndex,index)}   />

      </span>
    );
  };



  forMap = (caseItem,index) => {
    const CaseElem = caseItem.caseItemGroups.map((items,itemIndex)=>this.forMapItemCase(items,itemIndex,index,caseItem));
    const newIndex = index+1;
    const tagChild = caseItem.slotIds.map((item,itemIndex)=>this.forMapSlots(item,itemIndex,index));
    return (
      <Card title={`校验${newIndex}`} key={index} bordered={false} className={styles.caseItem} extra={<Icon type="close" onClick={()=>this.delCaseItem(index)} />}>
        <Row>
          {
            CaseElem
          }
        </Row>
        <div>
          <Form.Item {...formItemLayout} label="回复话术" style={{marginBottom:10}}>
            <Input className={styles.inputItem} placeholder="请输入回复话术" onChange={(e)=>this.fixInquire(e,index,'reply')} value={caseItem.reply} />
          </Form.Item>
          <Form.Item {...formItemLayout} label="词槽处理" style={{marginBottom:0}}>
            <Checkbox checked={caseItem.isClear} onChange={(e)=>this.fixInquire(e,index,'isClear')}>清空词槽</Checkbox>
            {
              caseItem.isClear?
                <span>
                  {tagChild}
                  {/*<Button htmlType='button' type="primary" size='small' onClick={()=>this.addSlot(index)} style={{marginLeft:10}}>添加</Button>*/}
                  <img src={addImg} alt="" height={47} style={{marginLeft:10,cursor:"pointer"}} onClick={()=>this.addSlot(index)} />
                </span>
              :""
            }
          </Form.Item>
        </div>
      </Card>
    );
  };

  addSlot=(index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotIds.push({});
    this.upDataByCallBack(caseArr)
  };

  delSlotByIndex=(itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotIds.splice(itemIndex,1);
    this.upDataByCallBack(caseArr)
  }

  handleSlotSelectChange=(val,itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotIds[itemIndex].slotId=val;
    this.upDataByCallBack(caseArr)
  };

  forMapItemCase=(items,itemIndex,index,caseItem)=>{
    switch (items.itemType) {
      case undefined:
        return(
          <div>
            {
              items.map((commItem,commItemIndex)=>this.forMapCommCase(commItem,commItemIndex,itemIndex,index,items,caseItem))
            }
            {
              // itemIndex === caseItem.caseItemGroups.length-1? <Button htmlType='button' type="primary" size='small' onClick={()=>this.addGroupCase(itemIndex,index)} className={styles.addGroupItem}>添加条件组</Button>:''
              itemIndex === caseItem.caseItemGroups.length-1? <img src={addTJZ} height={70} onClick={()=>this.addGroupCase(itemIndex,index)} className={styles.addGroupItem} alt="" /> :''
            }
          </div>
        )
      default:
        return  this.forMapSpecialCase(items,itemIndex)
    }
  };

  forMapCommCase =(commItem,commItemIndex,itemIndex,index,items,caseItem)=>{
    switch (commItem.itemType) {
      case 'slot':
        return this.renderSlotCase(commItem,commItemIndex,itemIndex,index,items,caseItem);
      default:
        return this.renderLogicCase(commItem)
    }
  };

  forMapSpecialCase=(specialItem,specialItemIndex)=>{
    return(
      <div key={specialItemIndex}>
        <img src={orImg} alt="" height={30}/>
      </div>
    )
  };

  renderSlotCase=(slotItem,slotIndex,itemIndex,index,items)=>{
    const {dialogSlots} = this.props;
    let OptionElem = null;
    if(dialogSlots.length>0){
      OptionElem = dialogSlots.map(this.forMapSlotsOption);
    }
    return(
      <Row key={slotIndex} style={{marginLeft:30,position:'relative',marginBottom:7}}>
        <Col>
          <Select size='large' defaultValue="N" value={slotItem.slotsId} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'slotsId')}>
            <Option value="N">请选择</Option>
            {OptionElem}
          </Select>
          <span className={styles.selectItemText}>状态为</span>
          <Select size='large' defaultValue="unfilled" value={slotItem.operator} className={styles.selectItem} style={{width:180}} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'operator')}>
            <Option value="filled">已填充</Option>
            <Option value="unfilled">未填充</Option>
            <Option value="equal">等于</Option>
            <Option value="not_equal">不等于</Option>
            <Option value="contain">包含</Option>
            <Option value="not_contain">不包含</Option>
            <Option value="great_than">大于(对应数值型词槽)</Option>
            <Option value="less_than">小于(对应数值型词槽)</Option>
            <Option value="great_than_equal">大于等于(对应数值型词槽)</Option>
            <Option value="less_than_equal">小于等于(对应数值型词槽)</Option>
            <Option value="great_than_time">大于(对应时间段型词槽)</Option>
            <Option value="less_than_time">小于(对应时间段型词槽)</Option>
            <Option value="new_than">早于(对应日期时间型词槽)</Option>
            <Option value="old_than">晚于(对应日期时间型词槽)</Option>
          </Select>

          {
            this.renderInputBySlotItemOperator(slotItem,slotItem.operator,slotIndex,itemIndex,index)
          }
          {
            this.renderTimeSelect(slotItem,slotItem.operator1,slotIndex,itemIndex,index)
          }
          {/*<Icon type="close-circle" onClick={()=>this.delCaseItemByCloseIcon(slotItem,slotIndex,itemIndex,index)} style={{marginLeft:5,cursor:'pointer'}} />*/}
          <img src={delImg} alt="" height={20} style={{marginLeft:10,cursor:"pointer"}} onClick={()=>this.delCaseItemByCloseIcon(slotItem,slotIndex,itemIndex,index)}  />
        </Col>
        <Col style={{marginLeft:30}}>
          {
            // slotIndex === items.length-1?<span className={styles.addOneCase} onClick={()=>this.addOnecase(slotItem,slotIndex,itemIndex,index)}> <Icon type="plus" />添加条件</span>:''
            slotIndex === items.length-1?
              <img src={addTJ} height={70} onClick={()=>this.addOnecase(slotItem,slotIndex,itemIndex,index)} className={styles.addOneCase} alt="" />
              :''

          }
        </Col>
      </Row>
    )
  };

  forMapSlotsOption = option =>{
    return (
      <Option key={option.slotId} value={option.slotId}>#{option.slotName}#</Option>
    )
  };

  renderLogicCase=(logicItem,logicIndex)=>{
    return(
      <div key={logicIndex} style={{position:'absolute',left:-5,marginTop:6}}>
        <img src={andImg} alt="" style={{width:30,cursor:'pointer'}}/>
      </div>
    )
  };

  addCase=()=>{
    const {caseArr} = this.props;
    caseArr.push({
      caseItemGroups:[
        [
          {
            itemType:'slot',
            operator: "unfilled",
            slotsId: "N",
            operator1:'N',
            time:'',
            time1:'',
            values:[]
          }
        ]
      ],
      method:'local',
      reply:'',
      isClear:false,
      retryClearSlots:'true',
      apiId:"N",
      check: {
        apiFieldName: "N",
        operator: "N",
        value: "N"
      },
      slotIds: [
        {
          slotId:"N"
        }
      ],
      apiFieldMapping:[
          {
           forItem:"N",
            apiFieldName: 'N',
            slotId:"N",
            apiFieldList:[],

          }
      ]
    });
    const {upDateCase} = this.props;
    upDateCase(caseArr)
  };

  upDataByCallBack=(res)=>{
    const {upNewData} = this.props;
    upNewData(res)
  };

  upSelectedData=(res,index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotsList= res;
    this.upDataByCallBack(caseArr)
  };

  /*
  * item 当前对象
  * index 当前对象所在数组索引
  * itemIndex 当前数组所在二维数组索引
  * rootIndex 循环根index
  * */
  addOnecase = (item,slotIndex,itemIndex,rootIndex) =>{
    const {caseArr} = this.props;
    caseArr[rootIndex].caseItemGroups[itemIndex].push(
      {
        itemType: "logic",
        value: "and"
      }
    );
    caseArr[rootIndex].caseItemGroups[itemIndex].push(
      {
        itemType:'slot',
        operator: "unfilled",
        slotsId: "N",
        operator1:'N',
        time:'',
        time1:'',
        values:[]
      }
    );
    this.upDataByCallBack(caseArr)
  };

  addGroupCase = (itemIndex,rootIndex) => {
    const {caseArr} = this.props;
    caseArr[rootIndex].caseItemGroups.push(
      {
        itemType: "logic",
        value: "or"
      }
    );
    caseArr[rootIndex].caseItemGroups.push(
        [
          {
            itemType:'slot',
            operator: "unfilled",
            slotsId: "N",
            operator1:'N',
            time:'',
            time1:'',
            values:''
          }
        ]
    );
    this.upDataByCallBack(caseArr)
  };

  delCaseItemByCloseIcon = (item,slotIndex,itemIndex,rootIndex) => {
    const {caseArr} = this.props;
    if(slotIndex === 0 && itemIndex === 0 && rootIndex === 0){
      return false;
    }

    if(caseArr[rootIndex].caseItemGroups[itemIndex].length>1){
      if(slotIndex ===0){
        if(caseArr[rootIndex].caseItemGroups[itemIndex][slotIndex+1].itemType !== undefined){
          caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex,1);
          caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex,1);
        }
      }else if(caseArr[rootIndex].caseItemGroups[itemIndex][slotIndex-1].itemType !== undefined){
          caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex,1);
          caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex-1,1);
        }
    }else if(caseArr[rootIndex].caseItemGroups[itemIndex-1].itemType !== undefined){
        caseArr[rootIndex].caseItemGroups[itemIndex].splice(slotIndex,1);
        caseArr[rootIndex].caseItemGroups.splice(itemIndex-1,1);
      }
    this.upDataByCallBack(caseArr)
  };

  onSlotOnChange = (e,slotItem,slotIndex,itemIndex,index,type) =>{
    const {caseArr} = this.props;
    caseArr[index].caseItemGroups[itemIndex][slotIndex][type] = e;
    this.upDataByCallBack(caseArr)
  };

  fixInquire=(val,index,type)=>{
    const {caseArr} = this.props;
    if(type === 'isClear'){
      caseArr[index][type]=val.target.checked;
    }else{
      caseArr[index][type]=val.target.value;
    }
    this.upDataByCallBack(caseArr)
  };

  fixRadio = (val,index) =>{
    const {caseArr} = this.props;
    caseArr[index].radio=val.target.value;
    this.upDataByCallBack(caseArr)
  };

  forMapOptionItem =(optionsItem,itemIndex,index)=>{
    return(
      <Col span={8} gutter={10} key={itemIndex}>
        <span>
          <span className={styles.slotNumber}>{itemIndex+1}</span>
          <Input className={styles.inputItem} placeholder="" style={{width:120}} value={optionsItem} defaultValue="" onChange={(e)=>this.UpdateOption(e,itemIndex,index)} />
          <Icon type="close-circle" style={{marginLeft:5,cursor:'pointer'}} onClick={()=>this.delOptionsByIndex(itemIndex,index)} />
        </span>
      </Col>
    )
  };

  addOptions = (index) =>{
    const {caseArr} = this.props;
    caseArr[index].options.push('');
    this.upDataByCallBack(caseArr)
  };

  delOptionsByIndex =(itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].options.splice(itemIndex,1);
    this.upDataByCallBack(caseArr)
  };

  UpdateOption =(e,itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].options[itemIndex]= e.target.value;
    this.upDataByCallBack(caseArr)
  };

  renderInputBySlotItemOperator = (slotItem,type,slotIndex,itemIndex,index) =>{
    switch (type) {
      case 'filled':
      case 'unfilled':
        return "";
      case 'equal':
      case 'not_equal':
      case 'contain':
      case 'not_contain':
        let string = '';

        if(slotItem.values.length>0){
          for(let i of slotItem.values){
            string += i.name+','
          }
        }
        return (
          <span>
            <Input className={styles.inputItem} style={{width:170}} disabled value={string} onClick={()=>this.showGetDictItemModal(slotItem.values,slotIndex,itemIndex,index)} />
            {/*<span style={{width:170,display:'inlineBlack'}} onClick={()=>this.showGetDictItemModal(slotItem.values,slotIndex,itemIndex,index,slotItem.slotsId)}>
              {
                slotItem.values.map((tag,index)=>{
                  return(
                    <Tag color="magenta">{tag.name}</Tag>
                  )
                })
              }
            </span>*/}
            <Icon type="appstore" theme="twoTone" style={{marginLeft:5,cursor:'pointer'}} onClick={()=>this.showGetDictItemModal(slotItem.values,slotIndex,itemIndex,index,slotItem.slotsId)} />
          </span>
        );
      case 'great_than':
      case 'less_than':
      case 'great_than_equal':
      case 'less_than_equal':
        return (
          <span>
            <InputNumber min={1} max={10} value={slotItem.values} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'values')} />
          </span>
        );
      case 'great_than_time':
      case 'less_than_time':
        return (
          <span>
            <InputNumber min={1} max={10} value={slotItem.values} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'values')}  />
            <Select size='large' defaultValue="N" value={slotItem.operator1} style={{ width: 100,marginLeft:5,marginRight:5 }} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'operator1')}>
              <Option value="N">请选择</Option>
              <Option value="d">天</Option>
              <Option value="w">周</Option>
              <Option value="m">月</Option>
              <Option value="y">年</Option>
              <Option value="h">时</Option>
              <Option value="min">分</Option>
              <Option value="s">秒</Option>
            </Select>
          </span>
        );
      case 'new_than':
      case 'old_than':
        return (
          <span>
            <Select size='large' defaultValue="N" value={slotItem.operator1} style={{ width: 100,marginLeft:5,marginRight:5 }} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'operator1')}>
              <Option value="N">请选择</Option>
              <Option value="J">今天</Option>
              <Option value="Z">昨天</Option>
              <Option value="M">明天</Option>
              <Option value="H">后天</Option>
              <Option value="week">本周</Option>
              <Option value="mon">本月</Option>
              <Option value="data">固定日期</Option>
            </Select>
          </span>
        );
      default:
        return "";
    }
  };

  updataItemCommonData=(e,slotIndex,itemIndex,index,type)=>{
    const {caseArr} =this.props;
    caseArr[index].caseItemGroups[itemIndex][slotIndex][type] = e;
    if(type === 'operator'){
     caseArr[index].caseItemGroups[itemIndex][slotIndex].operator1 = 'N';
    }
    this.upDataByCallBack(caseArr)
  };


  renderTimeSelect=(slotItem,type,slotIndex,itemIndex,index)=>{
    switch (type){
      case 'J':
      case 'Z':
      case 'M':
      case 'H':
        return this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
      case 'week':
        return(
          <span>
            <Select size='large' defaultValue="N" style={{ width: 100,marginLeft:5,marginRight:5 }} value={slotItem.time1 ===''?'00:00:00':slotItem.time1} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'time1')}>
              <Option value="N">请选择</Option>
              <Option value="1">周一</Option>
              <Option value="2">周二</Option>
              <Option value="3">周三</Option>
              <Option value="4">周四</Option>
              <Option value="5">周五</Option>
              <Option value="6">周六</Option>
              <Option value="7">周日</Option>
            </Select>
            {
              this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
            }
          </span>
        );
      case 'mon':
        return(
          <span>
            <Select size='large' defaultValue="N" style={{ width: 100,marginLeft:5,marginRight:5 }} value={slotItem.time1} onChange={(e)=>this.updataItemCommonData(e,slotIndex,itemIndex,index,'time1')}>
              <Option value="N">请选择</Option>
              <Option value="1">1日</Option>
              <Option value="2">2日</Option>
              <Option value="3">3日</Option>
              <Option value="4">4日</Option>
              <Option value="5">5日</Option>
              <Option value="6">6日</Option>
              <Option value="7">7日</Option>
              <Option value="8">8日</Option>
              <Option value="9">9日</Option>
              <Option value="10">10日</Option>
              <Option value="11">11日</Option>
              <Option value="12">12日</Option>
              <Option value="13">13日</Option>
              <Option value="14">14日</Option>
              <Option value="15">15日</Option>
              <Option value="16">16日</Option>
              <Option value="17">17日</Option>
              <Option value="18">18日</Option>
              <Option value="19">19日</Option>
              <Option value="20">20日</Option>
              <Option value="21">21日</Option>
              <Option value="22">22日</Option>
              <Option value="23">23日</Option>
              <Option value="24">24日</Option>
              <Option value="25">25日</Option>
              <Option value="26">26日</Option>
              <Option value="27">27日</Option>
              <Option value="28">28日</Option>
              <Option value="29">29日</Option>
              <Option value="30">30日</Option>
              <Option value="31">31日</Option>
            </Select>
            {
              this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
            }
          </span>

        );
      case 'data':
        return(
          <span>
            <DatePicker style={{marginLeft:5}} value={moment(slotItem.time1 ===''?new Date():slotItem.time1,dateFormat)} onChange={(time,timeString)=>this.updataItemCommonData(timeString,slotIndex,itemIndex,index,'time1')} />
            {
               this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
            }
          </span>
        );
      default :
        return '';
    }
  };

  renderTimePicker=(slotItem,type,slotIndex,itemIndex,index)=>{
    return(
      <TimePicker style={{marginLeft:5}} value={moment(slotItem.time ===''?'00:00:00':slotItem.time,timeFormat)} onChange={(time,timeString)=>this.updataItemCommonData(timeString,slotIndex,itemIndex,index,'time')} />
    )
  };

  showGetDictItemModal=(values,slotIndex,itemIndex,index,id)=>{
    if(id === 'N'){
     return message.info('请选择词槽')
    }
    this.setState({
      dictModalShow:true,
      values,
      slotIndex,itemIndex,index,slotId:id
    },()=>{
      this.fetchSlotDetailBySlotId();
    })
  };

  fetchSlotDetailBySlotId=(queryKey)=>{
    const that = this;
    const { dispatch } = that.props;
    const {slotId} = this.state;
    that.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'collectSlot/getSlotInfo',
        payload: { slotId ,queryKey},
        callback: (res) => {
          that.setState({
              slotCoreArr:res[0].items,
              slot:res[0]
          })
        }
      })
    });
  };

  hideGetDictItemModal=()=>{
    this.setState({
      dictModalShow:false
    })
  };

  modifValues=(e)=>{
    this.setState({
      values:e.target.value
    })
  };

  fixString =(str)=> {
    var temp = str.split(/[\n\s+,，；;]/g);
    for (var i = 0; i < temp.length; i++) {
      if (temp[i] == "") {
        // 删除数组中空值
        temp.splice(i, 1);
        i--;
      }
    }
    return temp;
    console.log(temp);
  };


  saveValues=(values,slotIndex,itemIndex,index)=>{
    const {caseArr} =this.props;
    if(typeof values === 'string'){
      let arr = this.fixString(values);
      let resArr = [];
      for(let i of arr){
        resArr.push({
          id:"",
          name:i
        })
      }
      caseArr[index].caseItemGroups[itemIndex][slotIndex].values=resArr;
    }else {
      caseArr[index].caseItemGroups[itemIndex][slotIndex].values=values;
    }

    this.upDataByCallBack(caseArr);
    this.hideGetDictItemModal();
  };

  addSlotItem =(id,name)=>{
    const { values,idArr} = this.state;
    values.push({
      id,
      name
    });
    idArr.push(id)

    this.setState({
      values,idArr
    })
  };

  mapSlotArr=(slotItem,slotIndex)=>{
    const {idArr} = this.state;
      if(idArr.indexOf(slotItem._id)>-1){
        return(
          <Col key={slotIndex} span={8} style={{marginTop:10}}>
            <Button htmlType='button' type="primary" size='small' disabled onClick={()=>this.addSlotItem(slotItem._id,slotItem.word,slotIndex)} className={styles.addSlotItem}>已添加</Button>
            {slotItem.word}
          </Col>
        )
      }else{
        return(
          <Col key={slotIndex} span={8} style={{marginTop:10}}>
            <Button htmlType='button' type="primary" size='small' onClick={()=>this.addSlotItem(slotItem._id,slotItem.word,slotIndex)} className={styles.addSlotItem}>添加</Button>
            {slotItem.word}
          </Col>
        )
      }
  };

  delCoreWords = (index)=>{
    const  {values,idArr} = this.state;
    idArr.splice(idArr.indexOf(values[index].id),1);
    values.splice(index,1);
    this.setState({
      values,
      idArr
    })
  };

  render() {
    const {caseArr} = this.props;
    const CaseChild = caseArr.map(this.forMap);
    const {dictModalShow,slotIndex,itemIndex,index,slotArr,slotCoreArr,slot} = this.state;
    let {values} = this.state;
    const slotEle = slotCoreArr.map(this.mapSlotArr);
    let newName ='';
    if(typeof values =='object' && slot !== null && !slot.isEnum){
     if(values.length>0){
       for(let i of values){
         newName += i.name+','
       }
     }
   }else{
      newName = values
    }
   // console.log(values);

    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          {CaseChild}
          <div className={styles.caseItem}>
            {/*<Button htmlType='button' type="primary" size='small' onClick={()=>this.addCase()} className={styles.addCaseItem}>添加校验</Button>*/}
            <a htmlType='button'  onClick={()=>this.addCase()} className={styles.addCaseItem1}><Icon type="plus" />添加校验</a>
          </div>
          <Modal
            title="词槽值集合"
            visible={dictModalShow}
            onOk={this.hideGetDictItemModal}
            onCancel={this.hideGetDictItemModal}
            onChange={(e)=>this.modifValues(e)}
            footer={[
              <div className={styles.flexcen}>
                <img  onClick={()=>this.saveValues(values,slotIndex,itemIndex,index)} src={savebuttom} />
              </div>

            ]}
          >
            {
              slot !== null && slot.isEnum?
                <div>
                  {
                    values.map((tag,index)=>{
                      return(
                        <Tag color="magenta" closable onClose={()=>this.delCoreWords(index)}>{tag.name}</Tag>
                      )
                    })
                  }
                  <Search
                    placeholder=""
                    onSearch={value => this.fetchSlotDetailBySlotId(value)}
                    style={{ width: '100%',marginTop:10 }}
                  />
                  <div style={{padding:10}}>
                    <Row gutter={16} >
                      {slotEle}
                    </Row>
                  </div>
                </div>
                :
              <TextArea rows={4} value={newName} autosize={{ minRows: 2, maxRows: 16 }}  onChange={(e)=>this.modifValues(e)} />
            }
          </Modal>
        </Suspense>
      </GridContent>
    );
  }
}
export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(SlotCase));
